var vueComponent = {
    init:function(){
        if(!Vue){
            return false
        }
        this.allLoad ?  this.load([                  //加载所需模块
            'vLoading','noData','previewImg','lastBottom'
        ]) : "";
        this.allDirective()          //加载自定义指令
    },
    load:function(arr){
        var _this = this;
        arr.map(function(v){ _this[v]()});
    },
    allLoad:true,
    allDirective:function(){
        // 注册一个全局自定义指令 `v-focus`
        Vue.directive('focus', {
            // 当被绑定的元素插入到 DOM 中时……
            inserted: function (el) {
                // 聚焦元素
                var myEvent = new Event('click');
                el.dispatchEvent(myEvent);
                el.focus();
            },
        })
    },
    /**
     * 加载组件
     * @param:opt {string,number} [0 - 1]
     * @param:pos {string,number} 定位方式  1 是固定定位, 2是绝对定位
    */
    vLoading:function(){
        Vue.component('v-loading',{
            template:'<div class="loading" :style="bgopt"><div class="middlews"><span class="left"></span><span class="right"></span></div></div>',
            props:{
                opt:{type:[String,Number],default:'1'},
                pos:{type:[String,Number],default:"1"}
            },
            computed:{
                bgopt:function(){
                    return {
                        backgroundColor:"rgba(255,255,255,"+this.opt+")",
                        position:this.pos == 1 ?'fixed' :"absolute",
                    }
                },
            }
        })
    },
    /**
     * 无数据组件
     * @param:msg {string} 显示内容
     * @param:pos {string,number} 定位方式  1 是固定定位, 2是绝对定位
    */
    noData:function(){
        //  无数据组件
        Vue.component('no-data',{
            template:'<div class="no-data" :style="bgopt"><img :src="imgsrc"></div>',
            data:function(){
                return {}
            },
            methods:{
                pageBack:function(){
                    api.closeWin()
                },
            },
            props:{
                imgsrc:{type:String,default:"../../image/nodata.png"},
                msg:{type:String,default:'暂无数据'},
                btnShow:{type:Boolean,default:false},
                pos:{type:[String,Number],default:"1"}
            },
            computed:{
                bgopt:function(){
                    return {
                        position:this.pos == 1 ?'fixed' :"absolute",
                    }
                },
            }
        });
    },
    /**
     * 图片预览组件
     * @param:isShow {boolean} 控制是否显示
     * @param:imgUrl {String} 预览图片地址
    */
    previewImg:function(){
        Vue.component('preview-img',{
            template:'<div class="preview-img" :class="{previewimgactive:isShow}" @click="closepreview">'
                        +'<div class="show-box">'
                            +'<img :src="imgUrl" alt="">'
                        +'</div>'
                    +'</div>',
            data:function(){return { }},
            methods:{
                closepreview:function(){ this.$emit('closepreview')},
            },
            props:{
                isShow:{type:Boolean,default:false},
                imgUrl:{type:String,default:""},
            },
        })
    },
    lastBottom:function(){
        Vue.component('last-bottom',{
            template:'<div class="last-bottom" >暂无更多数据</div>',
        })
    },
}

